import React, { useState } from 'react'
import { Descriptions, Space, Checkbox, Mentions, Radio, Button, DatePicker, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import '../scss/DueRemind.scss'
export default function TelephoneCollection() {

  const [Time, setTime] = useState('')
  const [Yse, setYes] = useState(1)
  const [Obj, setObj] = useState(1)
  const [Men, setMen] = useState('')

  const onChangeTime = (e) => {
    setTime(e._d)
  }

  const ChangeYes = (e) => {
    setYes(e.target.value)
  }

  const ChangeObj = (e) => {
    setObj(e.target.value)
  }

  const ChangeM = (e) => {
    setMen(e)
  }

  const submint = ()=>{
    console.log(Time);
    console.log(Yse);
    console.log(Obj);
    console.log(Men);
  }

  return (
    <div className='dueremind'>
      <Descriptions bordered>
        <Descriptions.Item label="催收时间:" span={3}>
          <Space direction="vertical" size={12}>
            <DatePicker showTime onChange={onChangeTime} />
          </Space>
        </Descriptions.Item>

        <Descriptions.Item label="是否接通:" span={3}>
          <Radio.Group onChange={ChangeYes} value={Yse} >
            <Radio value={1}>是</Radio>
            <Radio value={2}>否</Radio>
          </Radio.Group>
        </Descriptions.Item>

        <Descriptions.Item label="接听对象:" span={3}>
          <Radio.Group onChange={ChangeObj} value={Obj} >
            <Radio value={1}>本人接听</Radio>
            <Radio value={2}>非本人接听</Radio>
          </Radio.Group>
        </Descriptions.Item>

        <Descriptions.Item label="催收反馈:" span={3}>
          <Mentions placeholder='请填写借款人的应答信息' onChange={ChangeM}  >
          </Mentions>
        </Descriptions.Item>

        <Descriptions.Item label="上传录音:" span={3}>
          <Upload >
            <Button icon={<UploadOutlined />}>上传录音</Button>
          </Upload>
        </Descriptions.Item>
      </Descriptions>

      <div className="dueremind-btn">
        <Button type="primary" onClick={submint} >提交</Button>
        <Button  >取消</Button>
      </div>

    </div>
  )
}
